<script setup>
const props = defineProps({
  type: {type: Number, default: 0},
  dataList: {type: Array, default: () => {return []}}
})
</script>

<template>
  <table class="table striped">
    <colgroup v-if="type === 0">
      <col  />
      <col style="width:30%" />
      <col style="width:16%" />
      <col style="width:16%" />
    </colgroup>
    <colgroup v-if="type === 1">
      <col  />
      <col style="width:30%" />
      <col style="width:16%" />
      <col style="width:16%" />
    </colgroup>
    <colgroup v-if="type === 2">
      <col style="width:80%" />
      <col style="width:20%" />
    </colgroup>
    <thead>
    <tr v-if="type === 0">
      <th>名称</th>
      <th>手机号</th>
      <th>下载量</th>
      <th>成交量</th>
    </tr>
    <tr v-if="type === 1">
      <th>名称</th>
      <th>手机号</th>
      <th>下载量</th>
      <th>成交量</th>
    </tr>
    <tr v-if="type === 2">
      <th>手机号</th>
      <th>价格</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item, index) in dataList" :key="type + '-' + index + '-dataList'" v-if="type === 0">
      <td>{{item.name}}</td>
      <td><a :href="'tel:'+item.phone">{{item.phone}}</a></td>
      <td>{{item.number}}</td>
      <td>{{item.vipnumber}}</td>
    </tr>

    <tr v-for="(item, index) in dataList" :key="type + '-' + index + '-dataList'" v-if="type === 1">
      <td>{{item.name}}</td>
      <td>{{item.phone}}</td>
      <td>{{item.number}}</td>
      <td>{{item.vipnumber}}</td>
    </tr>

    <tr v-for="(item, index) in dataList" :key="type + '-' + index + '-dataList'" v-if="type === 2">
      <td>{{item.tel}}</td>
      <td>{{item.price}}</td>
    </tr>
    </tbody>
  </table>
</template>

<style scoped>
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.table.striped tbody > tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, .035);
}

.table td, .table th {
  text-align: center;
  padding: 5px;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  word-wrap: break-word; /* 或者 overflow-wrap: break-word; */
  white-space: normal;
}
.table td {
  font-size: 14px;
}

.table th {
  font-size: 14px;
  font-weight: 700;
  position: relative;
  opacity: .7;
}

.table th:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  content: ' ';
  background: rgba(0, 0, 0, .2);
}
</style>
